import {Button, Card, Form, Input} from "antd";
import logo from '@/assets/logo.png'

const Login = () => {

    const onFinish = (values) => {
        console.log(values)
    }

    return (<div className="Login">
        <Card className="login-container">
            <img className='login-logo' src={logo} alt="logo"/>
            {/*{登录组件}*/}
            <Form validateTrigger="onBlur" onFinish={onFinish}>
                <Form.Item name='phone' rules={[
                    {
                        required: true,
                        message: "请输入手机号",
                    },
                    {
                        pattern: /^1[3-9]\d{9}/,
                        message: "请输入正确的手机号"
                    }
                ]}>
                    <Input size='large' placeholder='请输入手机号' type='text'/>
                </Form.Item>
                <Form.Item name='code' rules={[
                    {
                        required: true,
                        message: "请输入验证码"
                    },
                    {
                        pattern: /\d{6}/,
                        message: "请输入正确的验证码"
                    }
                ]}>
                    <Input size='large' placeholder='请输入验证码' type='number'/>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" size='large' block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    </div>);
}

export default Login;